<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--一般给表单元素上使用，双向数据绑定，可以方便的获取或设置表单项数据，标签中的属性的值发生变化，data中的值也变化，反之亦然-->
    <!--语法：v-model="变量名"-->
    <div id="app">
        文章分类：<input type="text" v-model="searchConditions.category"/>
        <br>
        <span>插值表达式category:{{searchConditions.category}}</span>
        <br>
        发布状态：<input type="text" v-model="searchConditions.state"/>
        <br>
        <span>插值表达式state:{{searchConditions.state}}</span>
        <br>
        <button>搜索</button>
        <br>
        <button @click="reset">重置</button>
        <br/>
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in articleList">
                <td>{{item.title}}</td>
                <td>{{item.category}}</td>
                <td>{{item.time}}</td>
                <td>{{item.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>

        </table>
    </div>
</body>
<script type="module">
    //导入vue模块
    import {createApp} from '../vue.esm-browser.js'
    //创建vue应用实例
    createApp({
        data(){
            return {
                //定义数据
                articleList:[//表格数据
                    {
                        title:"title1",
                        category:"c1",
                        time:"t1",
                        state:'s1'
                    },
                    {
                        title:"title2",
                        category:"c2",
                        time:"t2",
                        state:'s2'
                    },
                    {
                        title:"title3",
                        category:"c3",
                        time:"t3",
                        state:'s3'
                    }
                ],
                searchConditions:{//绑定表单的数据
                    category:'时事',
                    state:'草稿'
                }
            }
        },
        methods: {
            //定义函数
            reset:function(){
                //清空category和state
                //在methods对应的方法里面，使用this就代表vue实例,可以使用this获取到vue实例中准备的数据
                this.searchConditions.category=''
                this.searchConditions.state=''
            }
            
        },
    }).mount('#app')//控制页面元素
</script>
</html>